<!-- 新首页 -->
<template>
  <view class="content">
    <view class="header-wrap">
      <image
        src="https://fh4.qinyuan.cn/uploads/view/static/project-img.png"
        class="home-img"
      ></image>
      <div class="search-wrap">
        <Search @confirm="handleSearch" :value="keyword" @input="handleInput"></Search>
      </div>
    </view>

    <view class="main-active">
      <view class="banner">
        <swiper
          class="banner-swiper"
          vertical
          :interval="2000"
          circular="true"
          indicator-active-color="#fff"
          easing-function="true"
          @change="swiperChange"
        >
          <swiper-item v-for="item in ads" :key="item.product_id">
            <view class="content-wrap">
              <view class="text-area" v-if="item.name">
                <view class="rich-text">{{ item.name }}</view>
                <view class="main-text">{{ item.content }}</view>
                <view class="other-text">{{ item.other }}</view>
              </view>
              <view
                class="img-area"
                :style="{
                  width: item.name ? '300rpx' : '100%',
                  marginLeft: item.name ? '20rpx' : '0rpx'
                }"
              >
                <image
                  mode="aspectFill"
                  :style="{ width: item.name ? '300rpx' : '100%' }"
                  :src="'https://fh4.qinyuan.cn' + item.img_url"
                  class="fire-img"
                />
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="main-after"></view>
    </view>

    <view class="foot-mark">
      <view class="mark-title">沁园足迹</view>
      <view class="mark-content">
        <view class="text-area">
          <view class="rich-text">富文本内容</view>
          <view class="mark-text">沁园足迹文本</view>
        </view>
        <view class="btn" @click="goPage('/pages/map/map')">文本信息</view>
      </view>
    </view>

    <view class="scheme">
      <view class="mark-title">方案定制</view>
      <view class="mark-content">
        <view class="text-area">
          <view class="rich-text">富文本内容</view>
          <view class="mark-text">方案定制文本</view>
        </view>
        <view class="btn" @click="goPage('/pages/customMode/customMode')">文本信息</view>
      </view>
    </view>

    <view class="category">
      <view class="category-title">分类</view>
      <view class="category-list">
        <view
          class="category-item"
          @click="goPage('/pages/webview/webview', 'https://vr.qinyuan.cn/2/index.html')"
        >
          <img src="../../static/home/wxxw.png" class="item-icon" />
          <text class="text">沁园小屋</text>
        </view>

        <view
          class="category-item"
          @click="goPage('/pages/webview/webview', 'https://vr.qinyuan.cn/2/index.html')"
        >
          <img src="../../static/home/hhbs.png" class="item-icon" />
          <text class="text">豪华别墅</text>
        </view>

        <view class="category-item" @click="goPage('/pages/softwater/softwater')">
          <img src="../../static/home/rscx.png" class="item-icon" />
          <text class="text">软水查询</text>
        </view>

        <view class="category-item" @click="goPage('/pages/quality-query/quality-query')">
          <img src="../../static/home/jscx.png" class="item-icon" />
          <text class="text">净水查询</text>
        </view>
      </view>
    </view>

    <!-- 留底 -->
    <view class="footer"></view>

    <view class="footer-wrap">
      <view class="footer">
        <view class="tab-item home">
          <img src="../../static/home/home.png" class="tabbar-icon" />
          <text class="tabbar-text active">首页</text>
        </view>
        <view class="tab-item product" @click="goPage('/pages/tabbar/tabbar?label=厨下&code=1')">
          <img src="../../static/home/Live.png" class="tabbar-icon" />
          <text class="tabbar-text">产品</text>
        </view>
        <view class="tab-item type" @click="goPage('/pages/tabbar/tabbar?label=户型&code=5')">
          <img src="../../static/home/menu.png" class="tabbar-icon" />
          <text class="tabbar-text">户型</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Search from '../../components/Search/Search.vue';
import requestV1 from '../../common/requestV1';
export default {
  components: {
    Search
  },
  data() {
    return {
      safeTop: 30,
      safeBottom: 30,
      keyword: '',
      ads: [],
      bannerList: [
        {
          url: 'https://img-blog.csdnimg.cn/37fa214c6c744e4ba0fcb2233017c8f4.png',
          color: 'red'
        },
        {
          url: 'https://img-blog.csdnimg.cn/8717f0e8d2b64efebcdc9c506a39bd61.png',
          color: 'green'
        },
        {
          url: 'https://img-blog.csdnimg.cn/ae94ba1d709744e2a6e36eb7d981f0a9.png',
          color: 'blue'
        },
        {
          url: 'https://img-blog.csdnimg.cn/6cc01905e7e942bdadb574af1079ae15.png',
          color: '#F0AD4E'
        }
      ],
      backColor: 'red'
    };
  },
  onLoad() {
    this.getBanners();
  },
  mounted() {
    this.show();
  },
  methods: {
    swiperChange(e) {
      const index = e.detail.current;
      this.backColor = this.bannerList[index].color;
    },
    getBanners() {
      requestV1({
        url: '/index/index_ads',
        method: 'get'
      }).then((res) => {
        console.log(`res-`, res);
        this.ads = res.data.ads;
      });
    },
    handleInput(e) {
      this.keyword = e;
    },
    handleSearch() {
      const queryStr = `?keyword=${this.keyword}`;
      uni.navigateTo({
        url: '/pages/search/search' + queryStr
      });
    },
    show() {
      wx.getSystemInfo({
        success: (res) => {
          this.safeTop = res.safeArea.top * 2;
          this.safeBottom = res.safeArea.bottom * 2;
          console.log(res.safeArea, 'this.safeBottom');
        }
      });
    },
    goPage(url, links) {
      url = links ? url + '?url=' + links : url;

      uni.navigateTo({
        url
      });
    }
  }
};
</script>

<style lang="scss">
.content-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #fff;
  border-radius: 48rpx;
  z-index: 3;
}

.main-after {
  position: absolute;
  left: 3%;
  bottom: -20rpx;
  width: 92%;
  height: 80rpx;
  background-color: rgb(249, 251, 251);
  border-radius: 24rpx;
  z-index: 1;
}

.text-area {
  display: inline-block;
  padding-left: 44rpx;
  vertical-align: top;
  flex: 1;
  overflow: hidden;
  .rich-text {
    margin-top: 58rpx;
    font-width: 500;
    font-size: 27rpx;
    line-height: 40rpx;
    color: rgba(84, 84, 84, 1);
  }
  .main-text {
    font-weight: 800;
    font-size: 54rpx;
    line-height: 76rpx;
    color: rgba(38, 39, 60, 1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .other-text {
    font-weight: 400;
    font-size: 18rpx;
    line-height: 25rpx;
    color: rgba(98, 98, 98, 1);
    margin-top: 12rpx;
  }
}

.img-area {
  display: inline-block;
  width: 300rpx;
  height: 100%;
  margin-left: 30rpx;
  .fire-img {
    width: 100%;
    height: 100%;
  }
}

.backgroundBanner {
  padding: 30rpx 10rpx;
  box-sizing: border-box;
}

.banner {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 48rpx;
  margin: 0 auto;
  z-index: 9;
}
.banner-swiper {
  height: 100%;
}

.banner image {
  width: 100%;
  height: 100%;
}

.content {
  color: #000;
  background-color: rgb(239, 241, 243);
  padding-top: 170rpx;
  overflow: auto;
  height: 100vh;
  box-sizing: border-box;

  .header-wrap {
    padding: 0 42rpx;
    height: 99rpx;
    margin-bottom: 36rpx;
    display: flex;
    justify-content: space-between;

    .search-wrap {
      width: 49%;
    }

    .home-img {
      width: 49%;
      height: 100%;
    }
  }

  .main-active {
    position: relative;
    margin: 0 42rpx 46rpx;
    width: 666rpx;
    height: 309rpx;
    border-radius: 48rpx;
    background-color: #fff;
    overflow: hidden;

    //.content-wrap {
    //  display: flex;
    //  flex-direction: row;
    //	width: 100%;
    //	height: 100%;
    //	position: absolute;
    //	background-color: #fff;
    //	border-radius: 48rpx;
    //	z-index: 3;
    //	border-radius: 48rpx;
    //}

    .main-after {
      display: none;
      position: absolute;
      left: 3%;
      bottom: -20rpx;
      width: 92%;
      height: 80rpx;
      background-color: rgb(249, 251, 251);
      border-radius: 24rpx;
      z-index: 1;
    }

    .text-area {
      display: inline-block;
      padding-left: 44rpx;
      vertical-align: top;
      flex: 1;
      overflow: hidden;
      .rich-text {
        margin-top: 58rpx;
        font-width: 500;
        font-size: 27rpx;
        line-height: 40rpx;
        color: rgba(84, 84, 84, 1);
      }
      .main-text {
        font-weight: 800;
        font-size: 54rpx;
        line-height: 76rpx;
        color: rgba(38, 39, 60, 1);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .other-text {
        font-weight: 400;
        font-size: 18rpx;
        line-height: 25rpx;
        color: rgba(98, 98, 98, 1);
        margin-top: 12rpx;
      }
    }

    .img-area {
      display: inline-block;
      width: 300rpx;
      height: 100%;
      margin-left: 30rpx;
      .fire-img {
        width: 300rpx;
        height: 100;
      }
    }
  }

  .foot-mark {
    padding: 0 42rpx;
    margin-bottom: 36rpx;
    .mark-title {
      font-size: 40rpx;
      line-height: 56rpx;
      font-weight: 700;
      color: rgba(20, 19, 18, 1);
    }
    .mark-content {
      border-radius: 32rpx;
      background-color: #fff;
      display: flex;
      height: 200rpx;
      box-sizing: border-box;
      justify-content: space-between;
      padding: 84rpx 32rpx 0;
      .text-area {
        padding-left: 0;
        .rich-text {
          margin-top: 0;
          font-weight: 500;
          font-size: 28rpx;
          line-height: 47rpx;
          color: rgba(20, 19, 18, 0.45);
        }
        .mark-text {
          font-weight: 600;
          line-height: 70rpx;
          font-size: 32rpx;
          color: rgba(20, 19, 18, 1);
        }
      }
      .btn {
        width: 120rpx;
        height: 46rpx;
        line-height: 46rpx;
        text-align: center;
        background-color: rgba(55, 68, 134, 1);
        margin: 36rpx 16rpx 0 0;
        font-size: 20rpx;
        color: #fff;
        border-radius: 11rpx;
      }
    }
  }

  .scheme {
    padding: 0 42rpx;
    margin-bottom: 36rpx;
    .mark-title {
      font-size: 40rpx;
      line-height: 56rpx;
      font-weight: 700;
      color: rgba(20, 19, 18, 1);
    }
    .mark-content {
      border-radius: 32rpx;
      background-color: #fff;
      display: flex;
      height: 200rpx;
      box-sizing: border-box;
      justify-content: space-between;
      padding: 84rpx 32rpx 0;
      .text-area {
        padding-left: 0;
        .rich-text {
          margin-top: 0;
          font-weight: 500;
          font-size: 28rpx;
          line-height: 47rpx;
          color: rgba(20, 19, 18, 0.45);
        }
        .mark-text {
          font-weight: 600;
          line-height: 70rpx;
          font-size: 32rpx;
          color: rgba(20, 19, 18, 1);
        }
      }
      .btn {
        width: 120rpx;
        height: 46rpx;
        line-height: 46rpx;
        text-align: center;
        background-color: rgba(55, 68, 134, 1);
        margin: 36rpx 16rpx 0 0;
        font-size: 20rpx;
        color: #fff;
        border-radius: 11rpx;
      }
    }
  }

  .category {
    padding: 0 42rpx;
    .category-title {
      font-weight: 700;
      font-size: 34rpx;
      line-height: 66rpx;
      color: rgba(26, 26, 26, 1);
    }
    .category-list {
      display: flex;
      justify-content: space-between;
      .category-item {
        width: 150rpx;
        height: 194rpx;
        background-color: rgba(220, 229, 238, 1);
        border-radius: 22rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .item-icon {
          width: 83rpx;
          height: 83rpx;
          margin-bottom: 10rpx;
        }
        .text {
          font-size: 25rpx;
          color: #000;
        }
      }
    }
  }

  .footer-wrap,
  .footer {
    height: 210rpx;
  }

  .footer-wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgb(243, 245, 246) url('../../static/home/tabbar-bg.png') center center no-repeat;
    .footer {
      width: 100%;
      height: 100%;
      background: url('../../static/home/circle.png') center 70rpx no-repeat;
      display: flex;
      justify-content: space-around;
      .tab-item {
        margin-top: 110rpx;
        display: flex;
        flex-direction: column;
        .tabbar-icon {
          width: 54rpx;
          height: 54rpx;
          margin-bottom: 8rpx;
        }
        .tabbar-text {
          text-align: center;
          font-size: 27rpx;
          color: rgba(137, 137, 136, 1);
        }
      }
      .product {
        margin-top: 78rpx;
        .tabbar-icon {
          width: 74rpx;
          height: 74rpx;
          margin-bottom: 0;
        }
        .tabbar-text {
          color: rgba(255, 255, 255, 1);
          margin-top: -8rpx;
        }
      }
      .active {
        color: rgba(55, 68, 134, 1) !important;
      }
    }
  }
}
</style>
